<template>
  <div>
    <el-dialog
      v-model="showDialog"
      :title="`${ipConfigData?.id ? '编辑' : '添加'}IP限制`"
      width="500px"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @open="openDialog"
      :before-close="cancel"
    >
      <el-form
        v-loading="loading"
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item :label="`规则`" prop="ipExpression">
          <el-input
            v-model="ruleForm.ipExpression"
            maxlength="100"
            show-word-limit
            clearable
            :placeholder="`示例:192.168.1.1 或 192.168.**`"
          />
        </el-form-item>
        <el-form-item :label="`类型`" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择类型">
            <el-option
              v-for="ele in typeList"
              :key="ele.id"
              :label="ele.name"
              :value="ele.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="`生效时间`" prop="takeEffectTime">
          <el-date-picker
            v-model="ruleForm.takeEffectTime"
            type="datetime"
            placeholder="生效时间"
          />
        </el-form-item>

        <el-form-item :label="`失效时间`" prop="expireTime">
          <el-date-picker
            v-model="ruleForm.expireTime"
            type="datetime"
            placeholder="失效时间"
          />
        </el-form-item>


        <el-form-item :label="`备注`" prop="remark">
          <el-input
            v-model="ruleForm.remark"
            type="textarea"
            rows="3"
            maxlength="200"
            show-word-limit
            clearable
            :placeholder="`请填写备注`"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="formValidate(ruleFormRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";
import sysConfigApi from "@/api/sysConfigApi";
const props = defineProps({
  showDialog: Boolean,
  ipConfigData: Object,
});
const Route = useRoute();
const loading = ref(false);
const { showDialog, ipConfigData } = toRefs(props);
const ruleFormRef = ref<FormInstance>();
const ruleForm = ref({
  ipExpression: "",
  type: "",
  takeEffectTime: "", // 生效时间
  expireTime: "", // 失效时间
  remark: '',
});
const typeList = ref([
  { name: "白名单", id: "White" },
  { name: "黑名单", id: "Black" },
]);

const rules = reactive<FormRules>({
  ipExpression: [{ required: true, message: "请输入规则", trigger: "blur" }],
  type: [{ required: true, message: "请选择类型", trigger: "change" }],
  takeEffectTime: [{ required: true, message: "请选择生效时间", trigger: "blur" }],
  expireTime: [{ required: true, message: "请选择失效时间", trigger: "blur" }],
  remark: [{ required: true, message: "请填写备注", trigger: "blur" }],
});


const openDialog = ()=>{
  ruleFormRef.value?.resetFields();
  if (ipConfigData?.value?.id) {
    ruleForm.value = {
      ipExpression: ipConfigData.value.ipExpression,
      type: ipConfigData.value.type,
      takeEffectTime: ipConfigData.value.takeEffectTime, // 生效时间
      expireTime: ipConfigData.value.expireTime, // 失效时间
      remark: ipConfigData.value.remark,
    };
  }
}

const formValidate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      submitForm();
    } else {
    }
  });
};

const submitForm = async () => {
  loading.value = true;
  let params = JSON.parse(JSON.stringify(ruleForm.value))
  params.takeEffectTime = new Date(params.takeEffectTime).getTime()
  params.expireTime = new Date(params.expireTime).getTime()
  let rs:any = ''
  if(ipConfigData?.value?.id) {
    params['id'] = ipConfigData?.value.id
    rs = await sysConfigApi.updateLimit(params)
  } else {
    rs = await sysConfigApi.addIpLimit(params)
  } 
  
  if(rs.code === 200) {
    ElMessage.success(`${ipConfigData?.value?.id ? '编辑' :'添加'}成功`)
    confirm()
  }
  loading.value = false;
};

const confirm = () => {
  emit("confirm");
  cancel();
};

const cancel = () => {
  emit("cancel", "addIpConfigDialog");
  
  ruleForm.value = {
    ipExpression: "",
    type: "",
    takeEffectTime: "", // 生效时间
    expireTime: "", // 失效时间
    remark: '',
  };
  
  
};
const emit = defineEmits(["confirm", "cancel"]);
defineExpose({ cancel });
</script>

<style lang="scss" scoped>
  :deep(.el-date-picker) {
    width: 100%;
  }
.el-select {
  width: 100%;
}

</style>
